<template>
    <view class="box">
        <!-- main -->
        <view class="main" :style="{paddingBottom: unipx + 'px'}">
            <view v-if="show === 0">
                <indexMain></indexMain>
            </view>
            <view v-if="show === 1">
                <service ref="service"></service>
            </view>
            <view v-if="show === 2">
                <myorder></myorder>
            </view>
            <view v-if="show === 3">
                <myhome @index="gettabindx" ref="myhome"></myhome>
            </view>
        </view>
        <!-- main e -->
        <!-- 自定义tabbar -->
        <view class="tabbar">
            <tabbar ref="tabbar" @clicktabindex="gettabindx"></tabbar>
        </view>
        <!-- 自定义tabbar e -->
        
        <!-- <u-tabbar
            :list="tabBarList"
            active-color="#1bc078"
            inactive-color="#cccccc"></u-tabbar> -->
    </view>
</template>

<script>
    // 主要展示的内容组件
    import indexMain from './indexMain.vue'
    // 订单列表
    import myorder from '../My_order/myorders.vue'
    // 用户个人空间
    import myhome from '../Myhome/Myhome.vue'
    import service from '../Service/service.vue'
    
    import tabbar from '../../custom_tab_bar/cu_tab_bar.vue'

    export default {
        components: {
            indexMain,
            myorder,
            myhome,
            tabbar,
            service
        },
        data() {
            return {
                show: 0,
                tabbarsarr: [
                    {
                        name: '首页',
                        img: '../static/img/navimg/Tab-icon-01@3x.png',
                        activeimg: '../static/img/navimg/Tab-icon-Active-01@3x.png'
                    },
                    {
                        name: "服务点",
                        img: "../static/img/navimg/service_active.png",
                        activeimg: "../static/img/navimg/service.png"
                    },
                    {
                        name: '订单',
                        img: '../static/img/navimg/Tab-icon-02@3x.png',
                        activeimg: '../static/img/navimg/Tab-icon-Active-02@3x.png'
                    },
                    {
                        name: '我的',
                        img: '../static/img/navimg/Tab-icon-04@3x.png',
                        activeimg: '../static/img/navimg/Tab-icon-Active-04@3x.png'
                    }
                ],
                // tabBarList: [],
                unipx: 0,
            };
        },
        onReachBottom() {
            if(this.show === 1){
                this.$refs.service.getMore();
            }
        },
        onLoad(options) {
            if(!this.$u.test.isEmpty(options.active)) {
                this.show = Number(options.active);
                this.$refs.tabbar.clicktabbars(Number(options.active));
            }
            if(!this.$u.test.isEmpty(options.invitecode)) {
                this.$store.commit('setInvitecode', options.invitecode);
            }
            this.unipx = uni.upx2px(120);
            // this.tabBarList = this.$store.state.tabBarList.ordinary
        },
        onShow() {
            this.$refs.myhome._getInfo();
            if(this.$store.state.isUserEdit == 1) {
                this.$refs.myhome._getInfo();
            }
        },
        methods: {
            gettabindx() {
                this.show = this.$store.state.active
            },
        }
    }
</script>

<style lang="scss" scoped>
</style>
